{% extends "wltheme/base.html" %}
{% load wenlincms_tags wlcore_tags %}


{% block main %}
    <div class="pwd-reset-title">
        <span class="am-icon-arrow-circle-down "> 密码找回</span>
    </div>
    <div class="pwd-reset-content">
        <form method="post"{% if form.is_multipart %} enctype="multipart/form-data"{% endif %}>
            {% csrf_token %}
            <fieldset>
                <div class="pwd-reset-div">
                    <div class="am-g pwd-reset-form-line">
                        <label for="{{ form.username.id_for_label }}" class="am-u-sm-3 am-form-label pwd-reset-label">用户名或者邮箱:</label>
                        <div class="am-u-sm-5">
                            <div style="width: 90%">{{ form.username }}</div>
                        </div>
                        <div class="pwd-error-tip">
                            {{ form.username.errors.0 }}
                        </div>
                    </div>
                    <div class="am-g pwd-reset-form-line">
                        <label for="{{ form.captcha.id_for_label }}" class="am-u-sm-3 am-form-label pwd-reset-label">验证码:</label>
                        <div class="am-u-sm-5">
                            {{ form.captcha }}
                        </div>
                        <div class="pwd-error-tip">
                            {{ form.captcha.errors.0 }}
                        </div>
                    </div>
                    <div class="am-u-sm-4 am-u-sm-centered form-actions ">
                        {% block account_form_actions %}
                            <input class="am-btn  am-btn-primary am-u-sm-8 " type="submit" value="进行验证"/>
                        {% endblock %}
                    </div>
                </div>
            </fieldset>
        </form>
    </div>
    <div class="am-modal am-modal-alert" tabindex="-1" id="email_verify">
        <div class="am-modal-dialog">
            <div class="am-modal-hd">重置密码</div>
            <div class="am-modal-bd">
                成功发送验证邮件,请前往邮箱进行密码重置。
            </div>
            <div class="am-modal-footer">
                <span class="am-modal-btn">确定</span>
            </div>
        </div>
    </div>
    {#  使用手机号进行验证#}
    <div class="am-modal am-modal-prompt" tabindex="-1" id="telephone_verify">
        <div class="am-modal-dialog">
            <div class="am-modal-hd">验证码已发送到您的手机，请于三分钟内进行验证</div>
            <br>
            <div class="am-g verification-div ">
                <div class="am-u-sm-3" style="left:40px">
                    <label class="verification-label">手机号码</label>
                </div>
                <div class="am-u-sm-5 last_child verification-input">
                    <input type="text" class="am-modal-prompt-input" id="id_telephone" name="telephone" disabled>
                </div>
            </div>
            <br>
            <div class="am-g verification-div">
                <div class="am-u-sm-3" style="left:40px">
                    <label class="verification-label">验证码</label>
                </div>
                <div class="am-u-sm-5 verification-input">
                    <input type="text" class="am-modal-prompt-input" id="id_code" name="code">
                </div>
                <div class="am-u-sm-2 last_child">
                    <label class="verification-label" id="code_error"></label>
                </div>
            </div>
            <br>
            <div class="am-g verification-line">
                <ol>
                    <li class="verification-note">
                        数宇科技产业数据平台不会将个人手机号用于任何商业目的
                    </li>
                    <li class="verification-note">
                        如果长时间未收到验证码，或者您的手机已停机或其他原因无法获取验证码，请致电010-56107632
                    </li>
                </ol>
            </div>

            <div class="am-modal-footer">
                <span class="am-modal-btn" data-am-modal-cancel>取消</span>
                <span class="am-modal-btn" data-am-modal-confirm>提交</span>
            </div>
        </div>
    </div>
{% endblock %}
{% block js %}
    <script src="{{ STATIC_URL }}{{ "wltheme/js/account/signVerify.js"|file_time_stamp }}"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            {#修改id_captcha_1样式#}
            $("#id_captcha_1").css({'width': '40%', 'margin-left': '30px'});
            $(".captcha").click(function () {
                var url = "/captcha/refresh"
                $.getJSON(url, {}, function (json) {
                    // This should update your captcha image src and captcha hidden input
                    $('#id_captcha_0').attr("value", json.key);
                    $(".captcha").attr("src", json.image_url);
                });
            })

            var success ={{success}};
            if (success == 1) {
                $('#email_verify').modal({
                    relatedTarget: this,
                    onConfirm: function (options) {
                    }
                });
            }
            else if (success == 2) {
                var telephone = {{ telephone }};
                document.getElementById("id_telephone").value = telephone;
                $('#telephone_verify').modal({
                    relatedTarget: this,
                    onConfirm: function (options) {
                        code = document.getElementById("id_code").value;
                        telephone = document.getElementById("id_telephone").value;
                        //向后台发送处理数据
                        $.ajax({
                            type: "POST", //用POST方式传输
                            dataType: "json", //数据格式:text
                            url: '/accounts/codeVerify/', //目标地址
                            data: "telephone=" + telephone + "&code=" + code,
                            success: function (msg) {
                                if (msg["Status"] != 0) {
                                    alert("验证码错误");
                                }
                                else {
                                    location.href = msg["verify_url"];
                                }
                            }
                        });
                    }
                });
                $('#telephone_verify').find('[data-am-modal-confirm]').off('click.close.modal.amui');
            }
        });
    </script>

{% endblock %}
{% block extra_css %}
    {{ block.super }}
    <link rel="stylesheet" href="{{ STATIC_URL }}{{ "wltheme/css/account.css"|file_time_stamp }}">
{% endblock %}